<template>
    <div id="collectAll">
        <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
            <div class="receiveitem" v-for="(list,indexs) in collectLists" :key="list.cname">
                <div class="userinfo">
                    <div class="cardinfo">
                        <i><img :src="baseUrl.baseUrl+list.cplogo"></i>
                        <p>{{list.cname}}</p>
                    </div>
                    <div class="tjs">
                        <p class="operateDetail" @click="beforeRec(list.icardid)"><i class="iconfont icon-pengyou"></i><span>推荐</span></p>
                        <p class="operateDetail" @click="beforeEx(list.icardid,list.icarduid)"><i class="iconfont icon-zhuanhuan"></i><span>交换</span></p>
                        <p @click="beforeRem(list)" class="operateDetail"><i class="iconfont icon-yiguanzhu"></i><span>已收藏</span></p>
                    </div>
                </div>
            </div>
        </scroller>
        <!-- 交换提示框 -->
        <el-dialog
            id="tosureExchange"
            :visible.sync="exchangeVisible"
            width="80%"
            style="margin-top:15vh">
            <el-radio-group v-model="exCardId">
                <div class="chooseitem" v-for="(item,index) in myCards" :key="index"><el-radio :label="item.id" @change="getExInfo(item.id)">{{item.cname}}</el-radio></div>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exchangeVisible = false">取 消</el-button>
                <el-button type="primary" @click="toExchangeCard">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 交换提示框结束 -->
        <!-- 取消收藏提示框 -->
        <el-dialog
            id="tosureRemoveCollect"
            :visible.sync="removeVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认取消收藏吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="removeVisible = false">取 消</el-button>
                <el-button type="primary" @click="toRemoveCard(rCardId,rUid)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 取消收藏提示框结束 -->
    </div>
</template>

<script>
import {collectList,recommendCard,isCreateCard,exchangeCard,removeCard,recommendListsAll} from '../../../../js/dataServe.js'
import {baseUrl} from '../../../../config/env.js'
export default {
    data(){
        return {
            exchangeVisible:false,
            removeVisible:false,
            recommendVisible:false,
            pageNo:1,
            collectLists:[],
            baseUrl:{baseUrl},
            isRec:false,//记录推荐的状态
            rCardId:'',//推荐名帖id
            rUid:'',//推荐人uid
            removeCard:'',//取消收藏的item
            myCards:'',//我的所有名帖
            exCardId:'',//要交换的名帖id
            beExUid:'',//被交换uid
            beExCardId:''//被交换的名帖id
        }
    },
    components:{},
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
        // this.infinite();
    },
    methods:{
        infinite(done) {

            if(sessionStorage.sid){
                let self = this;
                let responseData = collectList(self.pageNo);
                responseData.then((res)=>{
                                        // alert(decodeURIComponent(res.msg))
                                        if(res.data && res.data.list.length>0){
                                           
                                            let items = res.data.list;
                                            // console.log(items)
                                            items.forEach( (item,key) => {
                                                if(item.uid == sessionStorage.uid && self.collectLists.indexOf(item)<0){
                                                    self.collectLists.push(item)
                                                }
                                            })
                                            self.pageNo++;
                                            done();
                                            
                                        }else{
                                            self.$refs.my_scroller.finishInfinite(2);
                                        }
                                    })
            }
        },
        refresh(done) {
            done()
        },
         //推荐前
        beforeRec(icardid){
            this.$router.push({path:'/mine/toRecList',query:{icardid:icardid}})
        },
        
        //取消前
        beforeRem(item){
            this.removeVisible = true;
            this.removeCard = item;
        },
        //取消收藏
        toRemoveCard(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = removeCard(self.removeCard.id);
                responseData.then((res)=>{
                                            // alert(decodeURIComponent(res.msg))
                                            if(res.result==1){
                                                let index = self.collectLists.indexOf(self.removeCard);
                                                self.collectLists.splice(index,1)
                                                self.deleteVisible = false;
                                                self.removeVisible = false;
                                                self.$message({
                                                    duration: 2000,
                                                    message: '取消成功',
                                                    type: 'success'
                                                })
                                            }else{
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'error'
                                                })
                                            }
                                        })
            }
        },
        //获取我要交换的名帖id
        getExInfo(id){
            this.exCardId = id;
        },
        //获取我的名帖列表
        getMyCards(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = isCreateCard();
                responseData.then((res)=>{
                                            // console.log(decodeURIComponent(res.msg))
                                            if(res.result == 1){
                                                this.myCards = res.data;
                                            }
                                        })
            }
        },
        //交换前
        beforeEx(beid,beuid){
            this.exchangeVisible = true;
            this.getMyCards();
            this.beExCardId = beid;
            this.beExUid = beuid;
        },
        //交换
        toExchangeCard(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = exchangeCard(self.exCardId,self.beExUid,self.beExCardId);
                responseData.then((res)=>{
                                            // console.log(decodeURIComponent(res.msg))
                                            if(res.result == 1){
                                                this.exchangeVisible = false;
                                                self.$message({
                                                    duration: 2000,
                                                    message: '待对方确认',
                                                    type: 'success'
                                                })
                                            }else{
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'error'
                                                })
                                            }
                                        })
            }
        }
    }
}
</script>

<style scoped >
#collectAll {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width:100%;
    position: absolute;
    top: 6rem;
    margin: 0;
    bottom: 0;
    height: auto;
}
.receiveitem{
    padding:0.5rem 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
}
.userinfo{
    display:flex;
    width: 100%;
    justify-content: space-between;
}
.receiveitem i{
    width:4rem;
    height:4rem;
    display:block;
}
.receiveitem p{
    height:4rem;
    display:flex;
    padding-left: 1rem;
    align-items:center;
    justify-content: center;
    box-sizing:border-box;
}
.receiveitem i img{
    width:100%;
    height:100%;
    border-radius:5rem;
}
.operate{
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    background:#ebeef5;
}
.operate p{
    text-align:left;
}
.operateP{
    display:flex;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    right: 4rem;
    height: 3rem;
    align-items: center;
}
.operateDetail{
    display:flex;
    flex-direction:column;
    padding-left:1rem;
}
.operateDetail i,.operateDetail span{
    height: 1.2rem;
    line-height: 1.2rem;
}
.el-icon-arrow-right{
    position:absolute;
    right:1rem;
}
.is-active{
    background:#ebeef5;
}
.tjs,.cardinfo{
    display:flex;
    justify-content: center;
    align-items: center;
}
.tjs p{
    padding:0;
}
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    height: 3rem;
    line-height: 3rem;
    background: #606266;
}
.bgr{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    background: #ebeef5;
}
.chooseitem{
    display: flex;
    padding-left: 2rem;
}
.el-radio-group,.chooseitems{
    width:100%;
    height:6rem;
    overflow:auto;
}
.scroller{
    padding: 0 1rem;
    box-sizing: border-box;
    position: absolute;
}
.cardinfo p{
    width:5rem;
}
</style>
